<template>
	<view class="pageItem">
		<block v-for="(item,index) in list" :key="'h_'+index">
			<view class="card">
				<view class="row" @click="openChange" :data-index="index">
					<view class="r_tit">{{item.title}}？</view>
					<view class="iconfont more" :class="item.open ? 'more_active':''">&#xe70f;</view>
				</view>
				<view class="con" :class="item.open ? 'con_active':''">
						<u-parse :content="item.content"></u-parse>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				load_type : 'more',
				loading : 0,
				empty_show : 0, 
				page : 1,
				list:[
					
				],
				
			};
		},
		onLoad() {
			this.loadData();
		},
		methods:{
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/index/help_list?page='+this.page;
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 10)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			openChange(e){
				let _arr = JSON.parse(JSON.stringify(this.list))
				_arr[e.currentTarget.dataset.index].open = !_arr[e.currentTarget.dataset.index].open;
				this.list = _arr;
			}
		}
	}
</script>

<style lang="scss">
.card{
	@include card_style();
	width: 92%;
	margin-left: 4%;
	margin-top: 3vw;
	padding: 5vw 4vw;
	.row{
		width: 100%;
		display: flex;
		align-items: center;
		.r_tit{
			flex: 1;
			@include text_over_style(1);
			font-size: 3.8vw;
			color: $main_color5;
			font-weight: bold;
		}
		.more{
			font-size: 3.5vw;
			color: $main_color4;
			transition: transform 0.3s;
		}
		.more_active{
			transform: rotate(90deg);
		}
	}
	.con{
		width: 100%;
		color: $main_color4;
		font-size: 3.8vw;
		line-height: 6vw;
		max-height: 0;
		padding-top: 0;
		transition: max-height,padding-top,0.3s;
		overflow: hidden;
	}
	.con_active{
		max-height: 50vw;
		padding-top: 8vw;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			width: 100%;
			height: 1rpx;
			background: #6b6b6b;
			top: 4vw;
			left: 0;
		}
	}
}
</style>
